<template>
<div>
  <div class="my">
    <div class="top">
      <div class="iconfont icon-fanhui" @click="goBack"></div>
      <div class="text">猫眼电影</div>
    </div>
    <div class="login">
      <div class="router" @click="goMeituan">美团账号登录</div>
      <div class="router" @click="goPhone">手机验证登录</div>
    </div>
    <div class="slide">
      <!-- <transition enter-active-class="fly-in" leave-active-class="fly-out"> -->
        <div class="piece" ref="piece" v-if="value"></div>
      <!-- </transition> -->
        <!-- <transition enter-active-class="fly-out" leave-active-class="fly-in"> -->
      <div class="piece2" v-if="!value"></div>
      <!-- </transition> -->
    </div>
  </div>
  <router-view/>
</div>
  
</template>

<script>
export default {
  data(){
    return{
      value:true
    }
  },
  // watch:{
  //   value(newVal){
  //     console.log(newVal);
  //   }
  // },
  methods:{
    goBack(){
      this.$router.back();
    },
    goMeituan(){
      if(this.$route.path==='/my/meituan'){
        return;
      }
      this.$router.replace('meituan');
      this.value=true;
    },
    goPhone(){
      if(this.$route.path==='/my/phone'){
        return;
      }
      this.$router.replace('phone');
      this.value=false;
    }
  },
}
</script>

<style scoped lang="scss">
.top{
  width:100%;
  height:50px;
  display:flex;
  align-items: center;
  background-color: #df2d2d;
  color:#fff;
  font-size:18px;
  .iconfont{
    width:50px;
    text-align:center;
    font-size:30px;
  }
  .text{
    flex:1;
    text-align:center;
  }
}
.login{
  width:100%;
  height:40px;
  font-size:12px;
  color:#222;
  display:flex;
  align-items: center;
  justify-content: space-around;
  .router{
    box-sizing: border-box;
    height:40px;
    padding:16px 45px;
    display:inline-block;
  }  
}
@keyframes fly-in {
  0%{
    transform:translateX(50%);
  }
  100%{
    transform: translateX(0%);
  }
}
@keyframes fly-out {
  0%{
    transform:translateX(0%);
  }
  100%{
    transform: translateX(50%);
  }
}
.slide{
    width:100%;
    height:4px;
    background-color: #ddd;
    box-sizing: border-box;
    padding:0 5%;
    position:relative;
    .piece{
      width:45%;
      height:4px;
      background-color: #faaf00;
      &.fly-in{
        animation:300ms fly-in ease-in;
      }
      &.fly-out{
        animation:300ms fly-out ease-in;
      }
    }
    .piece2{
      width:45%;
      height:4px;
      background-color: #faaf00;
      position:absolute;
      top:0;
      right:5%;
    }
  }

</style>